<template>
	<div class="carnbon-container">
		<el-breadcrumb separator="/" style="padding: 0px 20px 10px">
			<el-breadcrumb-item>能源配置</el-breadcrumb-item>
			<el-breadcrumb-item :to="'/energyConfig/capacityPower'">变压器配置</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-wrapper">
			<div class="search-item">
				<el-input v-model="monitorPoint" placeholder="请输入" clearable>
					<template #prefix>
						<span class="search-item-label">监控点</span>
					</template>
				</el-input>
			</div>
			<div class="search-item">
				<el-select v-model="projectName" class="m-2" placeholder="请选择" clearable>
					<template #prefix>
						<span class="search-item-label">主体</span>
					</template>
					<el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</div>
			<el-button type="info" @click="onClear">清除</el-button>
			<el-button type="primary" @click="onSearch">查询</el-button>
		</div>
		<div class="add-wrapper">
			<el-button type="primary" icon="plus">新增</el-button>
		</div>
		<div class="table-wrapper">
			<el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'background-color': '#fafafa' }">
				<el-table-column prop="pointName" label="监控点" />
				<el-table-column prop="project.name" label="主体" />
				<el-table-column prop="installedCapacity" label="装机容量 (kVA)" />
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<span class="iconfont" @click="editRow(scope.row, scope.$index)">&#xe64f;</span>
						<el-popconfirm title="是否确认删除?" @confirm="deleteRow(scope.$index)">
							<template #reference>
								<span class="iconfont">&#xe62f;</span>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="currentPage"
				:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]"
				background
				layout="total, prev, pager, next, sizes"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				class="pagination"
			/>
		</div>
		<el-dialog v-model="dialogVisible" title="修改" width="30%" :show-close="false">
			<el-form :model="form" label-width="120px">
				<el-form-item label="主体">
					<el-select v-model="form.projectId" placeholder="请选择">
						<el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="监控点">
					<el-select v-model="form.pointId" placeholder="请选择">
						<el-option v-for="item in pointOptions" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="装机容量">
					<el-input v-model="form.installedCapacity" placeholder="请输入数字" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelEdit">取消</el-button>
					<el-button type="primary" @click="onConfirmEdit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { pointOptions, projectOptionsMock, tableDataMock, ProjectOption, TableDataProps } from './data';

	const monitorPoint = ref('');
	const projectName = ref('');
	const projectOptions = ref<ProjectOption[]>(projectOptionsMock);
	const tableData = ref<TableDataProps[]>(tableDataMock);

	const currentPage = ref(1);
	const pageSize = ref(20);
	const total = ref(3);
	const dialogVisible = ref(false);

	let form = reactive({
		index: -1,
		pointId: -1,
		installedCapacity: 0,
		projectId: -1
	});

	const handleSizeChange = (val: number) => {
		console.log(`${val} items per page`);
	};
	const handleCurrentChange = (val: number) => {
		console.log(`current page: ${val}`);
	};

	const onClear = () => {
		monitorPoint.value = '';
		projectName.value = '';
	};

	const onSearch = () => {};

	const editRow = (rowData, index) => {
		form.index = index;
		form.pointId = rowData.pointId;
		form.projectId = rowData.project.id;
		form.installedCapacity = rowData.installedCapacity;
		dialogVisible.value = true;
	};

	const onConfirmEdit = () => {
		dialogVisible.value = false;
		let cur = tableData.value[form.index];
		cur.pointId = form.pointId;
		cur.project.id = form.projectId;
		cur.installedCapacity = form.installedCapacity;
		const projectItem = projectOptionsMock.find(item => item.id === form.projectId);
		if (projectItem) {
			cur.project.name = projectItem.name;
		}
		const pointItem = pointOptions.find(item => item.id === form.pointId);
		if (pointItem) {
			cur.pointName = pointItem.name;
		}
		tableData.value[form.index] = cur;
		tableData.value = [...tableData.value];
	};

	const onCancelEdit = () => {
		dialogVisible.value = false;
	};

	const deleteRow = index => {
		tableData.value.splice(index, 1);
	};
</script>
<style lang="scss" scoped>
	.search-wrapper {
		display: flex;
		padding: 0 28px;
		.search-item {
			display: flex;
			position: relative;
			margin-right: 24px;
			.search-item-label {
				color: #9c9c9c;
			}
		}
	}
	.add-wrapper {
		padding: 0 28px;
		margin: 20px 0;
	}
	.table-wrapper {
		.iconfont {
			margin-right: 20px;
			color: #9c9c9c;
			cursor: pointer;
		}
		.pagination {
			margin-right: 20px;
		}
	}
</style>
